<template>
    <div>
        <h3>子组件</h3>
        <h2>{{ $store.state.num }}</h2>
        <h2>{{ num }}</h2>
        <h4>{{ $store.getters.evenOrOdd }}</h4>
        <h4>{{ evenOrOdd }}</h4>
        <button @click="add">加1</button>

        <input type="text" v-model="count">
        <button @click="jian">减1</button>
        <button @click="oddAdd">如果是奇数+1</button>
        <button @click="evenJian">如果是偶数-1</button>
    </div>
</template>

<script>
export default {
    mounted() {
        console.log(this.$store);
        console.log(this.$store.state.num);
    },
    computed: {
        num() {
            return this.$store.state.num;
        },
        evenOrOdd() {
            return this.$store.getters.evenOrOdd;
        },
    },
    methods:{
        add(){
            this.$store.commit("add", { name1: "yangyang", name2: "shizhe" });
        },
        jian(){
            this.$store.commit("jian",{count:this.count});
        },
        oddAdd(){
            this.$store.dispatch('oddAdd',{name1:"yangyang",name2:"shizhe"});
        },
        evenJian(){
            this.$store.dispatch("evenJian",{count:5});
        },
    }
}
</script>

<style lang="scss" scoped>

</style>